<template>
  <div id="app">
    <el-container style="height: 800px; border: 1px solid #eee">
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>查看</el-dropdown-item>
            <el-dropdown-item>新增</el-dropdown-item>
            <el-dropdown-item>删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>USER</span>
      </el-header>
      <el-container>
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
          <el-menu router :default-openeds="['0', '1']">
            <el-submenu v-for="(item, index) in $router.options.routes" :index="index+''" v-if="!item.hidden">
              <template slot="title"><i class="el-icon-message"></i>{{item.name}}</template>
              <el-menu-item :index="item2.path" v-for="(item2, index) in item.children" v-if="!item2.hidden"
                            :class="$route.path===item2.path?'is-active':''">{{item2.name}}</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>